import React, { Component } from 'react'
import './Radio.scss'
import PropTypes from 'prop-types'
export default class Radio extends Component {
    constructor(props) {
        super(props)
        this.state={
            activeIndex:0
        }
    }
	
	toogleChange(index){
		this.setState({
			activeIndex:index
		},()=>{
			
		})
	}
	
	
	
	render() {
	    let arr = this.props.arr.map((item,index)=>{
	        return (
	            <p key={index} id={index} style={{ background: this.state.activeIndex === index?"red":"" }} onClick={()=>{
	                this.toogleChange(index)
	            }}>
	                {item.value}
	            </p>   
	        )
	    })
	    return (
	        <>
	            <div className='list'>
	                {arr}
	            </div>
	        </>
	    
	    )
	}
	
}